<template>
	<view class="content">
		<view class="content-hender">
			<!-- 表单 -->
			<view class="addTop">
				<view class="nameBox">
					<view class="nameLeft">
						<text class="name">姓名</text>
						<text class="wyyname">
							ئىسىم
						</text>
					</view>
					<view class="nameRight">
						<input v-model="name" class="inputname" type="text" placeholder="请输入姓名" />
						<text class="wyyname">
							ئىسىم - فامىلىڭىزنى كىرگۈزۈڭ
						</text>
					</view>
				</view>
				<view class="nameBox">
					<view class="nameLeft">
						<text class="name">联系电话</text>
						<text class="wyyname">
							ئالاقىلىشىش تېلېفون نومۇرى
						</text>
					</view>
					<view class="nameRight">
						<input v-model="mobile" class="inputname" type="text" placeholder="请输入电话" />
						<text class="wyyname">
							تېلېفون كىرگۈزۈڭ
						</text>
					</view>
				</view>
				<view class="nameBox">
					<view class="nameLeft">
						<text class="name">身份证号码</text>
						<text class="wyyname">
							كىملىك نومۇرى
						</text>
					</view>
					<view class="nameRight">
						<input v-model="IDcard" class="inputname" type="text" placeholder="请输入身份号码" />
						<text class="wyyname">
							كىملىك نومۇرىنى كىرگۈزۈڭ
						</text>
					</view>
				</view>
			</view>
			<!-- 上传 -->
			<view class="upLoad">
				<view class="upLoad_title">上传培训学员本人照片</view>
				<view class="upLoadLang">
					يۇقىرىغا يوللاش تەربىيىلەش كۇرسانتلار ئۆزى رەسىم
				</view>
				<view class="showimg_box">
					<view class="show_img" @click="ChooseImage">
						<view class="imgAdd">+</view>
						<view class="btnUpload">上传</view>
						<view class="imgLang">
							يوللاش
						</view>
					</view>
					<view v-for="(item,index) in imgList" :key="index" class=" imgarr">
						<view class="icon-cuo" @click="delect(index)">
							<image class="closeImage" src="../../static/img/close.png" mode="aspectFill"></image>
						</view>
						<image class="images" mode="aspectFill"  :src="item" @click="lookImg(index)"></image>
					</view>
				</view>
			</view>
			<!-- 上传身份证 -->
			<view class="upLoadPeople">
				<view class="upLoad_title">上传培训学员身份证</view>
				<view class="upLoadLang">
					يوللاش تەربىيىلەش كۇرسانتلار كىملىك
				</view>
				<!-- 正面 -->
				<view class="positive">
					<view v-if="IDcard_front == ''" class="positivePeople" @click="upLoad">
						<view class="addimg">+</view>
						<view class="btnPeople">身份证正面</view>
						<view class="imgLang">
							كىملىك ئالدى
						</view>
					</view>
					<view v-if='IDcard_front' class="positivePeople">
							<image class="closeImage" src="../../static/img/close.png" @click="deleImage"></image>
						<image class="positiveImages" mode="aspectFill" :src="IDcard_front"></image>
					</view>
				</view>
				<!-- 反面 -->
				<view class="positive">
					<view v-if="IDcard_back == ''" class="positivePeople" @click="upLoadBack">
						<view class="addimg">+</view>
						<view class="btnPeople">身份证反面</view>
						<view class="imgLang">
							كىملىك سەلبىي
						</view>
					</view>
					<view v-if='IDcard_back' class="positivePeople">
							<image class="closeImage" src="../../static/img/close.png" @click="deleBackImage"></image>
						<image class="positiveImages" mode="aspectFill" :src="IDcard_back"></image>
					</view>
				</view>
			</view>
			<!-- 上传培训学员身体条件证明 -->
			<view class="upLoadPeople">
				<view class="upLoad_title">上传培训学员身体条件证明</view>
				<view class="upLoadLang">
					يۇقىرىغا يوللاش تەربىيىلەش كۇرسانتلارنىڭ بەدەن شارائىتى ئىسپاتى
				</view>
				<!-- 身体条件证明 -->
				<view class="positive">
					<view v-if="physical_evidence == ''" class="positivePeople" @click="upLoadBody">
						<view class="addimg">+</view>
						<view class="btnPeople">身体条件证明</view>
						<view class="imgLang">
							بەدەن شارائىتى ئىسپاتى
						</view>
					</view>
					<view v-if='physical_evidence' class="positivePeople">
							<image class="closeImage" src="../../static/img/close.png" @click="deleBody"></image>
						<image mode="aspectFill" class="positiveImages" :src="physical_evidence"></image>
					</view>
				</view>
			</view>
			<!-- 上传培训学员政治背景审查表 -->
			<view class="upLoadPeople">
				<view class="upLoad_title">上传培训学员政治背景审查表</view>
				<view class="upLoadLang">
	           يۇقىرىغا يوللاش تەربىيىلەنگەن ئوقۇغۇچىلسىياسىي ئارقا كۆرۈنۈش تەكشۈرۈش جەدۋىلىۇقىرىغا يوللاش تەربىيىلەش كۇرسانتلارنىڭ بەدەن شارائىتى ئىسپاتى
				</view>
				<!-- 身体条件证明 -->
				<view class="positive">
					<view v-if="political_background == ''" class="positivePeople" @click="upLoadExamination">
						<view class="addimg">+</view>
						<view class="btnPeople">政治背景审查表</view>
						<view class="imgLang">
							سىياسىي ئارقا كۆرۈنۈشنى تەكشۈرۈش جەدۋىلى
						</view>
					</view>
					<view v-if='political_background' class="positivePeople">
							<image class="closeImage" src="../../static/img/close.png" @click="deleExamination"></image>
						<image mode="aspectFill" class="positiveImages" :src="political_background"></image>
					</view>
				</view>
			</view>
			<!-- button -->
			<view v-if="!id"  @click="submit" class="footer_button">
				<view class="subCommit">
					<view class="conBtn">提交</view>
					<view class="btnLang">
						تاپشۇرۇش
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import app from '@/util/api.js'
	export default {
		data() {
			return {
				imgList: [],
				imgArr: "",
				id:'',
				name:'',
				mobile:'',
				IDcard:'',//身份证照片
				pingjiaSrc: '',
				IDcard_front: '', //身份证正面
				IDcard_back: '', //身份证反面面
				physical_evidence: '', //身体证明
				examinationUrl:'',//审查地
				political_background:'',//政治背景审查表
			}
		},
		onLoad(o) {
			if(o.id){
				this.id = o.id
				this.getdetail()
			}
		
		},
		methods: {
			// 拒绝弹窗
			onToast(item) {
				app.toast(`${item.text}`)
			},
			//详情
			getdetail(){
				app.load()
					let data = {
						id:this.id
					}
					app.request('train_detail',data).then(respones=>{
						let res = respones.data
						this.imgList = res.images
						this.name=res.name
						this.mobile = res.mobile
						this.IDcard=res.IDcard//身份证照片
						this.pingjiaSrc = res.pingjiaSrc
						this.IDcard_front=res.IDcard_front//身份证正面
						this.IDcard_back = res.IDcard_back//身份证反面面
						this.physical_evidence=res. physical_evidence//身体证明
						this.examinationUrl=res.examinationUrl//审查地
						this.political_background=res.physical_evidence//政治背景审查表
						app.hide()
					})
			},
			//添加培训代办提交
			submit(){
				
					if(!this.name){
						app.toast('请输入姓名')
						return
					}
					if(!app.isphoneNumber(this.mobile)){
						app.toast('请输入手机号')
						return
					}
					if(!this.IDcard){
						app.toast('请输入身份证号')
						return
					}
					if(!this.imgList.length){
						app.toast('请上传本人图片')
						return
					}
					if(!this.IDcard_front){
						app.toast('请上传身份证正面照')
						return
					}
					if(!this.IDcard_back){
						app.toast('请上传身份证反面照')
						return
					}
					if(!this.physical_evidence){
						app.toast('请上传身份条件证明')
						return
					}
					if(!this.political_background){
						app.toast('请上传政治背景审查表')
						return
					}
					let data  ={
						name:this.name,
						mobile:this.mobile,
						IDcard:this.IDcard,
						images:this.imgList.join(','),
						IDcard_front:this.IDcard_front,
						IDcard_back:this.IDcard_back,
						physical_evidence:this.physical_evidence,
						political_background:this.political_background
					}
					app.request('api/train',data,'POST').then(res=>{
						app.toast('添加成功')
					})
			},
			// 上传头像
			ChooseImage() {
           app.fileupload(res=>{
			   this.imgList.push(res)
		   })				
					
				
			},
			// 删除
			delect(index) {
				this.imgList.splice(index, 1)
			},
			// 预览
			lookImg(val) {
				const urls = this.imgList
				const current = val
				uni.previewImage({
					urls,
					current
				})
			},
	
			// 身份证正面删除
			deleImage(){ 
				this.IDcard_front = ''
			},
			//身体证明条件
			upLoadBody(){
				app.fileupload(res=>{
					this.physical_evidence = res
				})	
			},
			deleBody(){
				this.physical_evidence = ''
			},
			// 反面
			upLoadBack(){ 
				app.fileupload(res=>{
					this.IDcard_back = res
				})
			},
			// 身份证反面删除
			deleBackImage(){ 
				this.IDcard_back = ''
			},
		
		
		
			// 审查删除
			deleExamination(){ 
				this.political_background = ''
			},
			upLoadExamination(){
				app.fileupload(res=>{
					this.political_background = res
				})
			},
			//上传身份证正面
			upLoad(){
				app.fileupload(res=>{
					this.IDcard_front = res
				})
			}
		}
	}
</script>

<style scoped>
	.content {
		min-height: 100vh;
		background: #F5F5F5;
		font-family: PingFang SC;
		padding-bottom: 130rpx;
	}

	.addTop {
		background-color: #FFFFFF;
		padding: 0 30rpx;
	}

	.nameBox {
		border-bottom: 1rpx #eee solid;
		padding: 35rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		color: #999999;
	}

	.nameBox:nth-last-child(1) {
		border-bottom: 0rpx #eee solid;
	}

	.nameLeft {
		display: flex;
		flex-direction: column;
	}

	.name {
		font-size: 30rpx;
		color: #333333;
	}

	.wyynae {
		padding-top: 18rpx;
	}

	.nameRight {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.inputname {
		font-size: 30rpx;
		text-align: right;
		max-width: 300rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.footer_button {
		width: 100%;
		padding: 23rpx 0 15rpx 0;
		background: #FFC03C;
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 122;
	}

	.subCommit {
		display: flex;
		flex-direction: column;
		color: #FFFFFF;
	}

	.conBtn {
		font-size: 30rpx;
		text-align: center;
	}

	.btnLang {
		font-size: 24rpx;
		text-align: center;
	}

	/* 上传 */
	.upLoad {
		padding: 20rpx 30rpx;
		background: #FFFFFF;
	}

	.upLoad_title {
		font-size: 30rpx;
	}

	.upLoadLang {
		font-size: 24rpx;
	}

	.showimg_box {
		display: flex;
		margin-top: 20rpx;
		flex-wrap: wrap;
	}

	.show_img {
		width: 218rpx;
		height: 218rpx;
		border: 1rpx solid #eee;
		margin: 20rpx 0;
		background: #F5F5F5;
		border-radius: 10rpx;
		display: flex;
		text-align: center;
		flex-direction: column;
		color: #999999;
	}

	.imgAdd {
		margin-top: 40rpx;
		font-size: 36rpx;
		font-weight: 600;
	}

	.btnUpload {
		font-size: 24rpx;
		font-weight: 500;
	}

	.imgLang {
		font-size: 18rpx;
	}

	.images {
		display: block;
		width: 210rpx;
		height: 210rpx;
		z-index: 999;
	}

	.imgarr {
		display: flex;
		align-items: center;
		position: relative;
		margin: 0 10rpx;
	}

	.icon-cuo {
		position: absolute;
		right: 0;
		top: 5rpx;
		color: #FFFFFF;
		z-index: 1000;
		border-radius: 50%;
	}

	.closeImage {
		display: block;
		width: 26rpx;
		height: 26rpx;
	}

	/* 上传身份证 */
	.upLoadPeople {
		padding: 20rpx 30rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
	}

	.positivePeople {
		width: 100%;
		height: 360rpx;
		border: 1rpx solid #eee;
		margin: 20rpx 0;
		background: #F5F5F5;
		border-radius: 10rpx;
		display: flex;
		text-align: center;
		flex-direction: column;
		color: #999999;
		position: relative;
	}

	.addimg {
		font-weight: 500;
		font-size: 60rpx;
		margin-top: 60rpx;
	}

	.btnPeople {
		font-size: 26rpx;
		font-weight: 500;
		color: #333333;
		margin-top: 25rpx;
	}

	.positiveImages {
		display: block;
		width: 100%;
		height: 360rpx;
	}

	.closeImage {
		position: absolute;
		right: 0;
		top: 5rpx;
		color: #FFFFFF;
		z-index: 1000;
		border-radius: 50%;
	}
</style>
